<template>
    <div class="father" >
        <a-carousel arrows class="childa" >
            <div
                    slot="prevArrow"
                    class="custom-slick-arrow"
                    style="left: 30px ;z-index: 1;"
            >
                <a-icon type="left" :style="{ fontSize: '60px' }" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow" style="right: 60px">
                <a-icon type="right" :style="{ fontSize: '60px' }"/>
            </div>
            <div ><img src="https://s1.ax1x.com/2020/06/26/NrKHjf.jpg"></div>
            <div ><img src="https://s1.ax1x.com/2020/06/26/NrMp3q.jpg"></div>
            <div ><img src="https://s1.ax1x.com/2020/06/26/NrMZ59.jpg"></div>
        </a-carousel>
        <div class="childb">
            <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch"
                    style="">
                <a-row type="flex" justify="center">
                    <a-col>
                        <a-form-item   style="padding-left: 0px; ">
                            <a-cascader
                                    size="large"
                                    style=" width: 100%; "
                                    placeholder="城市"
                                    v-decorator="[
                                'address',
                              {
                                rules: [
                                  { type: 'array', required: true, message: '请选择城市' },
                                ],
                              },
                            ]"
                                    :options="residences"
                            />
                        </a-form-item>
                    </a-col>
                    <a-divider type="vertical" style="height: 0px"></a-divider>
                    <a-col>
                        <a-form-item  style="margin-bottom:0; margin-right: 0px;">
                            <a-input
                                    placeholder="关键词/目的"
                                    size="large"
                                    style="display: inline-block; width: 100%; "
                                    v-decorator="['hotelKeyWord']"
                            />
                        </a-form-item>
                    </a-col>
                    <a-divider type="vertical" style="height: 0px"></a-divider>
                    <a-col
                    >
                        <a-form-item   style="margin-left: 0">
                            <a-range-picker @change="selectedDate"
                                            size="large"
                                            v-decorator="[
                              'roomdate',
                              {
                                rules: [ {  required: true, message: '请选择预定时间'} ],
                              },
                            ]">
                                <a-icon slot="suffixIcon" type="calendar"/>
                            </a-range-picker>
                        </a-form-item>
                    </a-col>
                    <a-divider type="vertical" style="height: 0px"></a-divider>
                    <a-col
                    >
                        <a-form-item   style="margin-left: 0px;padding-right: 0px; ">
                            <a-button icon="search"  size="large" ghost type="primary" html-type="submit">
                                搜索
                            </a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </div>
</template>

<script>
    import {mapGetters, mapMutations, mapActions} from 'vuex'
    export default {
        name: "homePageSearch",
        data(){
            return{
                form: this.$form.createForm(this, {name: 'advanced_search'}),
                roomdate: Array,
            }
        },
        computed: {
            ...mapGetters([
                'residences',
                'searchedHotelList'
            ]),
        },
        mounted() {
            this.getResidences()
            this.getUserInfo()
        },
        methods: {
            ...mapMutations([
                'set_searchedHotelList'
            ]),
            //通过排序直接修改state里面的数据从而完成排序显示
            ...mapActions([
                'submitHotelSearchParams',
                'getResidences',
                'getUserInfo'

            ]),
            selectedDate(date, dateString) {
                this.roomdate = dateString;
            },
            handleSearch(e) {
                console.log('点击了')
                e.preventDefault();
                this.form.validateFields((error, values) => {
                    if (!error) {
                        const data = {
                            bizId: this.form.getFieldValue('address')[2],
                            roomDemandCnt: 1,
                            beginDate: this.roomdate[0],
                            endDate: this.roomdate[1],
                            stars: ["Five", "Four", "Three","Two","One"],
                            hotelNameKeyWord: this.form.getFieldValue('hotelKeyWord') === "" ? null : this.form.getFieldValue('hotelKeyWord'),
                            ordered:  0,
                        }
                        this.submitHotelSearchParams(data)
                        this.$router.push({name: 'hotelBooking'})
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 600px;
        line-height: 160px;
        overflow: hidden;
    }

    .ant-carousel >>> .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0);
        opacity: 0.3;
    }
    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;
    }
    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .ant-carousel >>> .slick-slide img {
        display: block;
        margin: auto;
        width: 100%;
    }


    .ant-advanced-search-form {
        margin-left: 10%;
        margin-right: 10%;
        background: #ffffff;
        border: 1px solid #d9d9d9;
        padding-top: 20px;
        padding-bottom: 0;
        border-radius:0;
    }
    .ant-advanced-search-form:hover {
        box-shadow:0 5px 7px  #484848;
    }
    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }
    .father{
        position:relative;
        height:650px;
    }
    .childa{
        position:absolute;
        z-index: 60;
        top:0px;
        width: 100%;
        height:600px;
    }
    .childb{
        position:absolute;
        z-index: 100;
        top:420px;
        width:100%;
        height:40px;
    }
</style>
